<template>
    <div>
        <!-- <Foo>Fn组件内容</Foo> -->
        <!-- <Foo>
            <template v-slot:default>
                Fn组件内容
            </template>
        </Foo>
        <Foo>
            <template v-slot:foo>
                Fn组件内容
            </template>
        </Foo> -->
        <!-- <Foo>
            <template v-slot:[fee]="slotProp">
                {{slotProp}}
            </template>
        </Foo> -->
        <!-- <Foo v-slot:default="{users}">{{users}}</Foo> -->

        <!-- <a @click.stop="fn">这是a标签</a> -->
        <!-- <a @click.once="fn">点击</a> -->
        <!-- <form v-on:submit.prevent="onSubmit">
            <input type="submit">
        </form> -->

        <!-- <Foo @clicks="fn"></Foo> -->
        <!-- <Foo @click.native="fn"></Foo> -->

        <!-- <button @click="test('Foo')">click</button>
        <button @click="test('Fnn')">click</button>
        <components :is="cpt"></components> -->

        <!-- <Fnn :user="user"></Fnn> -->
        <!-- <Count></Count> -->
        <Fnn></Fnn>

    </div>
</template>

<script>
import Foo from "@/components/FN";
import Fnn from "@/components/FNN";
export default {
  data() {
    return {
      fee: "foo",
      cpt: 'Foo',
    //   user: '',
      user: 555,
    //   user: 'zhangsan',
    };
  },
  methods:{
      onSubmit(){
          console.log(1)
      },
      fn(){
          console.log(11)
      },
      test(value){
          this.cpt = value
      }
  },
  mounted(){
      console.log(this.$root)
  },
  components: {
    Foo,
    // Fnn:resolve => require(['@/components/FNN'],resolve),
    Fnn:() => import('@/components/FNN'),
  }
};
</script>

<style scoped>
</style>